<template>
	<view class="">
		<view v-show="titleOp > 0" :style="[{paddingTop: $store.state.statusBarHeight + 'px'},{'opacity': titleOp}]"
			class="position-fixed z-index-100 top-0 bg-fff w-100 d-flex">
			<view class="d-flex d-flex-middle pl-3 pr-1 w-100" :style="{'height': $store.state.titleBarHeight + 'px'}">
				<view class="d-flex d-flex-middle pr-3" @click="showDrawer('showLeft')">
					<text class="iconfont icon-zhenhuichongtubiaozhizuo-kuozhan- font-bold color000"></text>
				</view>
				<view class="d-flex-item d-flex-btn" style="padding-right: 80rpx;">
					{{$store.state.user.nickname}}
				</view>
			</view>
		</view>
		<view class="lgmain animated fadeIn faster page-container">
			<view class="position-relative">
				<view class="square position-absolute z-index-1 top-0 left-0">
					<image class="square rad-bottom z-index-1 position-absolute" style="opacity: .6;" mode="aspectFill"
						:src="$store.state.user.background || 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/formal/images/usrbg.jpg'">
					</image>
					<view class="square rad-bottom z-index-10 bgmask position-relative"></view>
				</view>
				<view class="position-relative z-index-10" :style="{'paddingTop':$store.state.statusBarHeight+'px'}">
					<view :style="{'width': $store.state.titleBarWidth + 'px'}">
						<view class="d-flex d-flex-middle pl-3 pr-1"
							:style="{'height': $store.state.titleBarHeight + 'px'}">
							<view class="d-flex d-flex-middle pr-3" @click="showDrawer('showLeft')">
								<text class="iconfont icon-zhenhuichongtubiaozhizuo-kuozhan- font-bold colorfff"></text>
							</view>
							<view class="capsule1 rounded30 d-flex d-flex-center d-flex-middle" @click="gotoWallet">
								<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/formal/images/m1.png"
									mode="heightFix" style="height: 26rpx;"></image>
								<text class="font24 ml-1">钱包</text>
							</view>
							<view class="capsule2 rounded30 d-flex d-flex-center d-flex-middle" @click="gotoMytask">
								<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/formal/images/m3.png"
									mode="heightFix" style="height: 26rpx;"></image>
								<text class="font24 ml-1">任务</text>
							</view>
							<view class="capsule3 rounded30 d-flex d-flex-center d-flex-middle" @click="gotomember">
								<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/formal/images/m4.png"
									mode="heightFix" style="height: 18rpx;"></image>
								<text class="font24 ml-1">贵族特权</text>
							</view>
						</view>
					</view>

					<view class="d-flex d-flex-center position-relative mt-7" @click="gotoPersonalHomepage">
						<image class="rounded" mode="aspectFill" :src="$store.state.user.avatar"
							style="width: 130rpx; height: 130rpx;"></image>
						<view v-show="hasAvatarFrams && device" class="position-absolute"
							style="width: 185rpx; height: 185rpx; top: -25rpx;">
							<l-svga ref="svga"></l-svga>
						</view>
						<view v-show="hasAvatarFrams && !device" class="position-absolute"
							style="width: 185rpx; height: 185rpx; top: -25rpx;">
							<img :src="iconFile" class="position-absolute" style="width: 185rpx; height: 185rpx;" />
						</view>
					</view>

					<view class="mb-3 mt-5" v-if="$store.state.loginStatus">
						<view class="d-flex-btn">
							<text
								class="colorfff font40 font-bold mr-3"
								:class="[$store.state.user.accountType===2? 'VipText' : $store.state.user.accountType===3? 'SvipText' : '']"
								@click="gotoPersonalHomepage"
							>
								{{$store.state.user.nickname}}
							</text>
							<view>
								<image 
									v-if="$store.state.user.accountType == 2"
									src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/svip-y.png"
									style="width: 116rpx; height: 32rpx;"
								>
								</image>
								<image 
									v-if="$store.state.user.accountType == 3"
									src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E5%9B%BE%E5%B1%82%207%402x.png"
									style="width: 116rpx; height: 32rpx;"
								>
								</image>
							</view>
						</view>
						<view class="d-flex d-flex-center d-flex-middle colorfff mb-3">
							<view class="d-flex d-flex-middle mt-1">
								<text class="colorfff font26 mr-5" v-if="$store.state.user.ipProvince">IP属地：{{$store.state.user.ipProvince.slice(0, -1)}}</text>
								<image v-if="$store.state.user.gender == 2"
									src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/formal/images/sex.png"
									style="width: 30rpx;height: 30rpx;"></image>
								<image v-if="$store.state.user.gender == 1"
									src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%94%B7.png"
									style="width: 30rpx;height: 30rpx;"></image>
								<text class="mx-1 font26">ID</text>
								<text class="font26 mr-5">168{{$store.state.user.uid}}</text>
								<view class="position-relative">
									<text class="iconfont icon-dian1"
										:class="[$store.state.user.onlineStatus == 1? 'colorsuccess' : 'invisible']"></text>
									<text @click="OpenChangeOnlinePopup"
										class="font26">{{$store.state.user.onlineStatus == 1? '在线' : '隐身'}}</text>
									<text class="iconfont font22 icon-youjiantou mr-3"></text>
									<view v-show="ChangeOnline"
										class="position-absolute d-flex-column d-flex-center bg-fff rounded15 pt-2"
										style="top: -140rpx; right: -70rpx; width: 200rpx; height: 110rpx;">
										<label @click="ChangeOnlineStatus(dex)" v-for="(i, dex) in onlineStatus"
											:key="i" class="w-100 d-flex d-flex-middle d-flex-between radio"
											style="height: 45%;">
											<view class="ml-2 font26 color231816 mr" style="width: 60rpx;">{{i.title}}
											</view>
											<view v-if="i.checked" class="ActiveRadio"></view>
											<view v-else
												style="width: 25rpx; height: 25rpx; border: 1px solid #cdcdcd; margin-right: 22rpx;"
												class="rounded"></view>
										</label>
										<view class="position-relative"
											style="bottom: -10rpx; left: 25rpx; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #fff;">
										</view>
									</view>
								</view>
								<text class="iconfont icon-bianji" @click="gotoPersonalHomepage"></text>
							</view>
						</view>

						<view class="colorfff font24 text-center px-5 text-clamp-two">
							{{$store.state.user.signature}}
						</view>
					</view>
					<view class="mb-10 d-flex d-flex-center" @click="goLogin" v-else>
						<text class="font36 colorfff font-bold">立即登录</text>
					</view>

					<view class="px-1 pb-2">
						<view class="rounded30 bg-fff p-2">
							<view class="d-flex px-3 d-flex-between d-flex-middle mb-5">
								<view style="height: 90rpx;" @click="OpenThumbUpFrame">
									<view class="d-flex d-flex-center d-flex-middle" style="height: 60rpx;">
										<text
											class="font40 font-bold color231816">{{$store.state.user.blogFavorCount || 0}}</text>
									</view>
									<view class="d-flex d-flex-center d-flex-middle" style="height: 30rpx;">
										<text class="font26 color71">获赞</text>
									</view>
								</view>
								<text class="iconfont icon-shugang color9f"></text>
								<view style="height: 90rpx;" @click="gotoFollowPage">
									<view class="d-flex d-flex-center d-flex-middle" style="height: 60rpx;">
										<text
											class="font40 font-bold color231816">{{$store.state.user.concernCount? $store.state.user.concernCount : '0'}}</text>
									</view>
									<view class="d-flex d-flex-center d-flex-middle" style="height: 30rpx;">
										<text class="font26 color71">关注</text>
									</view>
								</view>
								<text class="iconfont icon-shugang color9f"></text>
								<view style="height: 90rpx;" @click="gotoFans">
									<view class="d-flex d-flex-center d-flex-middle" style="height: 60rpx;">
										<text
											class="font40 font-bold color231816">{{$store.state.user.fansCount || 0}}</text>
									</view>
									<view class="d-flex d-flex-center d-flex-middle" style="height: 30rpx;">
										<text class="font26 color71">粉丝</text>
									</view>
								</view>
								<text class="iconfont icon-shugang color9f"></text>
								<view style="height: 90rpx;" @click="gotoVisitor">
									<view class="d-flex d-flex-center d-flex-middle" style="height: 60rpx;">
										<text class="iconfont icon-zuji- color231816"></text>
									</view>
									<view class="d-flex d-flex-center d-flex-middle" style="height: 30rpx;">
										<text class="font26 color71">足迹</text>
									</view>
								</view>
								<text class="iconfont icon-shugang color9f"></text>
								<view style="height: 90rpx;" @click="gotoBrowse">
									<view class="d-flex d-flex-center d-flex-middle" style="height: 60rpx;">
										<text
											class="font40 font-bold color231816">{{$store.state.user.visitCount? $store.state.user.visitCount : '0'}}</text>
									</view>
									<view class="d-flex d-flex-center d-flex-middle" style="height: 30rpx;">
										<text class="font26 color71">访客</text>
									</view>
								</view>

							</view>

							<view class="px-2 pb-2">
								<view class="player px-3 py-2 d-flex d-flex-middle d-flex-between mb-3"
									@click="gotomember">

									<view class="d-flex d-flex-middle">
										<image 
											:src="$store.state.user.accountType==1? 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/no-vip.png' : $store.state.user.accountType==2? 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/vip.png' : 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/svip.png'" 
											mode="heightFix" 
											style="height: 45rpx;"
										></image>
										<text 
											class="font30 ml-1"
											v-if="$store.state.user.accountType&&$store.state.user.accountType==1"
										>开通小搭超级玩家</text>
										<text 
											class="font30 ml-1"
											v-if="$store.state.user.accountType&&$store.state.user.accountType==2"
										>VIP到期时间为：{{$store.state.user.vipExpireTime.split('T')[0].replace(/-0+(\d)/g, '-$1') }}</text>
										<text 
											class="font30 ml-1"
											v-if="$store.state.user.accountType&&$store.state.user.accountType==3"
										>SVIP到期时间为：{{$store.state.user.vipExpireTime.split('T')[0].replace(/-0+(\d)/g, '-$1') }}</text>
									</view>
									<view class="d-flex d-flex-middle">
										<text class="font24 mr"
											v-if="$store.state.user.accountType==1">专属身份标识</text>
										<text class="iconfont font24 icon-arrow-right1"></text>
									</view>

								</view>

								<view v-if="Dazi" class="d-flex d-flex-between mb-3">
									<scroll-view scroll-x class="scroll-wrapper" :show-scrollbar="false"
										:enable-flex="true" enhanced="true" :scroll-anchoring="true"
										:hide-scrollbar="true">
										<view class="d-flex">
											<view class="g-item1 rounded20 d-flex-middle mr-2" v-for="item in Dazi"
												:key="item.id" v-if="Dazi.length!==0"
												@click="toDetail(item.id,item.gameId)">
												<image class="game-icon rounded10 mr-1" :src="item.gameAvatar">
												</image>
												<text class="game-name font24 mr color231816">{{item.gameName}}</text>
												<text class="iconfont icon-youjiantou2 color71"></text>
											</view>
											<view class="g-item1 rounded20 d-flex d-flex-middle" v-else
												@click="gotoIndexPage">
												<view class="font24 text-center" style="flex: 1;">去发布搭子卡</view>
												<text class="iconfont icon-youjiantou2 color71"></text>
											</view>
										</view>
									</scroll-view>
								</view>


								<view class="d-flex d-flex-middle mb-4">
									<view class="position-relative" @click="changType(0)">
										<text :class="['color71', ctype===0? 'current' : '']">关于我</text>
										<text class="position-absolute iconfont icon-dian1 orange-color font30"
											style="top: -12rpx;right: -18rpx;"></text>
									</view>
									<view class="mx-3">
										<text :class="['color71', ctype===1? 'current' : '']"
											@click="changType(1)">动态</text>
									</view>
								</view>

								<view class="" v-if="ctype === 0">
									<view class="font36 mb-1 color000">账号等级</view>
									<view class="d-flex d-flex-between mb-2">
										<view class="level d-flex d-flex-column d-flex-middle mr-2"
											@click="gotoAccountLevelPage(0)">
											<text class="mb-1">魅力值</text>
											<image class="mb-1"
												src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/huizhang3.png"
												mode="heightFix" style="height: 120rpx;"></image>
											<view class="d-flex-btn">
												<image :src="$store.state.user.charmValueIcon"
													style="width: 96rpx; height: 36rpx; margin-bottom: 2px;"></image>
											</view>
										</view>

										<view class="level d-flex d-flex-column d-flex-middle mr-2"
											@click="gotoAccountLevelPage(1)">
											<text class="mb-1">财富值</text>
											<image class=""
												src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/huizhang1.png"
												mode="heightFix" style="height: 120rpx;"></image>
											<view class="d-flex-btn">
												<image :src="$store.state.user.wealthValueIcon"
													style="width: 100rpx;height: 45rpx;"></image>
											</view>
										</view>

										<view class="level d-flex d-flex-column d-flex-middle"
											@click="gotoAccountLevelPage(2)">
											<text class="mb-1">等级</text>
											<image class=""
												src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/huizhang2.png"
												mode="heightFix" style="height: 120rpx;"></image>
											<view class="d-flex-btn">
												<image :src="$store.state.user.experienceValueIcon"
													style="width: 100rpx;height: 45rpx;"></image>
											</view>
										</view>
									</view>

									<view class="font36 mb-2 color000">MBTI性格</view>
									<view class="position-relative">
										<view class="d-flex  position-absolute" style="left: 36rpx; top: 12rpx;">
											<text class="font-bold font34" style="font-style: italic;">{{$store.state.user.personalityType?$store.state.user.personalityType:"测测自己的MBTI性格"}}</text>
											<text 
												v-if="!$store.state.user.personalityType" 
												class="font24 ml-1"
												style="position: relative;left: -324rpx;bottom: -39rpx; font-style: italic; margin-bottom: 2px;"
											>
												(为您匹配更精准的嗒子)
											</text>
										</view>
										<image
											src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/MBTI.png"
											mode="widthFix" style="width: 660rpx;"></image>
										<view @click="gotoPersonal"
											class="linerbg rounded30 position-absolute z-index-10 px-2 py-1"
											style="left: 36rpx;bottom: 30rpx;">
											<text class="colorfff font26">前往测试</text>
										</view>
									</view>
								</view>

								<view v-if="blog.length!=0&&ctype === 1" style="margin-top: 80rpx;"
									v-for="(item,index) in blog" :key="index">
									<view class="" style="width: 100%; margin: 0 auto;">
										<view class="d-flex d-flex-between">
											<view class="">
												<view class="d-flex mb-1">
													<view 
														v-if="item.id==topid" 
														class="font22 mr-1 colorfff rounded10" 
														style="margin-top: -6rpx; background-color: cornflowerblue; letter-spacing: 1px;padding: 4rpx;"
													>
														置顶
													</view>
													<view class="font-bold font20" style="color: #878787;">
														{{item.gmtCreated}}</view>
													<view class=" font20 ml-5" style="color: #878787;">
														{{item.visitCount}}浏览</view>
												</view>
												<view class="topic-list" v-if="item.topicNames">
													<view v-for="(topic, index) in item.topicNames.split(',')"
														:key="index" class="">
														<view class="topic-content px-2 py-1">
															<text class="topic-hash">#</text>
															<text class="topic-name">{{topic}}</text>
														</view>
													</view>
												</view>
												<view class="font28 mb-1">{{item.remark}}</view>
											</view>
											<text class="iconfont icon-gengduo" @click="openMorePopup(item)"></text>
										</view>
										<view class="d-flex  d-flex-middle">
											<image v-if="item.screenshot1" :src="item.screenshot1"
												@click.stop="previwImage(index,0)" @load="ImgSize($event, index)"
												:class="['rounded15',{'MorePic':item.screenshot2&&!item.screenshot3},{'threePic':item.screenshot2&&item.screenshot3}]"
												:mode="item.screenshot2? 'aspectFill' : 'widthFix'"
												:style="[{maxWidth: item.isLongChart? '550rpx' : '660rpx'}]"></image>
											<image
												:class="['rounded15', 'ml-1', item.screenshot2&&!item.screenshot3? 'MorePic' : 'threePic']"
												v-if="item.screenshot2" :src="item.screenshot2"
												@click.stop="previwImage(index,1)" mode="aspectFill"></image>
											<image
												:class="['rounded15', 'ml-1', 'mr-2', item.screenshot3? 'threePic' : '']"
												v-if="item.screenshot3" :src="item.screenshot3"
												@click.stop="previwImage(index,2)" mode="aspectFill"></image>
										</view>
										<!-- <view class="aixin rounded30 px-1 mt-2 py-1 d-flex d-flex-middle" @click.stop="gotoPromotion(item)">
												<text class="iconfont icon-aixin_shixin mr" style="color: #FF6C00;"></text>
												<text class="font24">上热门</text>
											</view> -->
										<view class="d-flex d-flex-between d-flex-middle mt-2">
											<image class="ml-1"
												src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E8%BD%AC%E5%8F%91.png"
												mode="widthFix" style="width: 26rpx; height: 26rpx;"
												@click.stop="share(item)"></image>
											<view class="d-flex d-flex-middle" @click.stop="dianzan(item.id)">
												<image v-if="item.favorFlag"
													src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/heart-3-fill.png"
													style="width: 35rpx; height: 35rpx;"></image>
												<text v-else class="iconfont icon-aixin1 color6d"></text>
												<text class="color71 font26 ml-1">{{item.favorCount}}</text>
											</view>
											<view class="d-flex d-flex-middle mr-1" @click.stop="gotoDetail(item)">
												<text class="iconfont icon-pinglun color6d"></text>
												<text
													class="color71 font26 ml-1">{{item.totalCommentCount == 0? '' : item.totalCommentCount}}</text>
											</view>
										</view>
									</view>

								</view>
								<view v-if="isLastPage" style="width: 100%;"><text class="d-flex  font30"
										style=" justify-content: center; color: #585858;  ">---到底了---</text> </view>
								<view v-if="blog.length==0&&ctype === 1" style="width: 100%;">
									<view v-if="cardLoading" class="rounded60 d-flex d-flex-center d-flex-middle"
										style="background-color: #f5f5f5;height: 1060rpx;">
										<text class="color999 font26">加载中...</text>
									</view>
									<view v-else>
										<text class="position-relative font-bold font30 d-flex"
											style="justify-content: center;align-items: center;top: 405rpx;">您暂时还没有发布动态</text>
										<image class="position-relative" style="top: -84rpx;left: 58rpx;width: 80%;"
											src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/xiaoda.png">
										</image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<uni-drawer ref="showLeft" mode="left" :mask-click="true">
				<view
					:style="{'paddingTop':$store.state.statusBarHeight+'px','height': $store.state.titleBarHeight + 'px'}">
				</view>
				<view class="px-3">
					<view class="d-flex d-flex-middle d-flex-between mb-5" @click="gotoGift">
						<view>
							<text class="iconfont icon-liwu mr-3 color71"></text>
							<text class="font26">我的礼物</text>
						</view>
						<view class="d-flex d-flex-middle">
							<text class="iconfont icon-dian1 orange-color"></text>
							<text class="iconfont icon-youjiantou"></text>
						</view>
					</view>

					<view class="d-flex d-flex-middle d-flex-between mb-5" @click="gotoMytask">
						<view>
							<text class="iconfont icon-renwu1 mr-3 color71"></text>
							<text class="font26">我的任务</text>
						</view>
						<view>
							<text class="iconfont icon-youjiantou"></text>
						</view>
					</view>

					<view class="d-flex d-flex-middle d-flex-between mb-5" @click="gotoActivityCenter">
						<view>
							<text class="iconfont icon-fenlei mr-3 color71"></text>
							<text class="font26">活动中心</text>
						</view>
						<view class="d-flex d-flex-middle">
							<text class="color999 font24 mr-1">0</text>
							<text class="iconfont icon-youjiantou"></text>
						</view>
					</view>

					<view class="d-flex d-flex-middle d-flex-between mb-5" @click="Gotorecords">
						<view>
							<text class="iconfont icon-jilu mr-3 color71"></text>
							<text class="font26">我的记录</text>
						</view>
						<view class="d-flex d-flex-middle">
							<text class="iconfont icon-youjiantou"></text>
						</view>
					</view>

					<view class="d-flex d-flex-middle d-flex-between mb-5" @click="goChatAdministrator">
						<view>
							<text class="iconfont icon-kefu mr-3 color71"></text>
							<text class="font26">我的客服</text>
						</view>
						<view class="d-flex d-flex-middle">
							<text class="iconfont icon-youjiantou"></text>
						</view>
					</view>

					<view class="d-flex d-flex-middle d-flex-between mb-5" @click="gotoSecurityCenter">
						<view>
							<text class="iconfont icon-anquan2 mr-3 color71"></text>
							<text class="font26">安全中心</text>
						</view>
						<view class="d-flex d-flex-middle">
							<text class="iconfont icon-youjiantou"></text>
						</view>
					</view>

					<view class="d-flex d-flex-middle d-flex-between mb-5" @click="gotoSecurity">
						<view>
							<text class="iconfont icon-anquan mr-3 color71"></text>
							<text class="font26">隐私与安全</text>
						</view>
						<view class="d-flex d-flex-middle">
							<text class="iconfont icon-youjiantou"></text>
						</view>
					</view>

					<view class="d-flex d-flex-middle d-flex-between mb-5" @click="loginOut">
						<view>
							<text class="iconfont icon-shezhi font30 mr-3 color71"></text>
							<text class="font26">设置</text>
						</view>
						<view class="d-flex d-flex-middle">
							<text class="iconfont icon-youjiantou"></text>
						</view>
					</view>

					<view class="d-flex d-flex-middle d-flex-between mb-5" @click="gotoAboutMe">
						<view>
							<text class="iconfont icon-guanyu mr-3 color71"></text>
							<text class="font26">关于我们</text>
						</view>
						<view class="d-flex d-flex-middle">
							<text class="iconfont icon-youjiantou"></text>
						</view>
					</view>
				</view>
			</uni-drawer>
			<view @click="confirm" class="position-fixed z-index-100 top-0 right-0 left-0 bottom-0"
				:style="{'background': 'rgba(23, 28, 97, .5)', 'display': Visible}">
				<view @click.stop="CloseBullet" class="position-relative"
					style="width: 570rpx; height: 377rpx; top: 50%; left: 50%; transform: translate(-50%, -50%); background-image: url(https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%205036.png); background-size: 100% 100%;">
					<view class="d-flex position-absolute font30"
						style="top: 50%; left: 50%; transform: translateX(-50%);">当前获得点赞数<view class="ml-1">
							{{$store.state.user.blogFavorCount || 0}}</view>
					</view>
					<image class="position-absolute top-0"
						src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%205035.png"
						style="width: 248.25rpx; height: 221.69rpx; left: 50%; transform: translate(-50%, -40%);">
					</image>
					<view @click="confirm" class="linerbg colorfff text-center pt-2 pb-2 rounded40 position-absolute"
						style="width: 376rpx; bottom: 10%; left: 50%; transform: translateX(-50%);">我知道了</view>
				</view>
			</view>
			<uni-popup @change="changestatus" type="bottom" ref="morePopup" background-color="#fff"
				border-radius="16px 16px 0 0 " style="z-index: 10;">
				<view class="popup-content pt-4">
					<view class="d-flex d-flex-middle ml-3 mt-2" @click="collect(i)">
						<image v-if="morePopupData.collectFlag"
							src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E6%94%B6%E8%97%8F.png"
							mode="heightFix" style="height: 40rpx; width: 40rpx;"></image>
						<image v-else
							src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20241209161617.png"
							mode="heightFix" style="height: 40rpx; width: 40rpx;"></image>
						<text v-if="!morePopupData.collectFlag" class="font32 ml-2">收藏</text>
						<text v-else class="font32 ml-2">取消收藏</text>
					</view>
					<view class="d-flex mt-2 ml-2 d-flex-middle ml-3 mb-4 mt-4" @click="TopUp(i)">
						<image
							src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BD%AE%E9%A1%B6.png"
							mode="heightFix" style="height: 35rpx; width: 35rpx;"></image>
						<text v-if="topid!=morePopupData.id" class="font32 ml-2">置顶</text>
						<text v-else class="font32 ml-2">取消置顶</text>
					</view>

					<view class="d-flex mt-2 ml-2 d-flex-middle ml-3 mb-4 mt-4" @click="deleteBlog">
						<image
							src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E4%B8%BE%E6%8A%A5.png"
							mode="heightFix" style="height: 35rpx; width: 35rpx;"></image>
						<text class="font32 ml-2">删除</text>
					</view>
				</view>
			</uni-popup>

			<uni-popup @change="changestatus" ref="share" type="share" safeArea backgroundColor="#fff" position: fixed
				border-radius="8px 8px 0 0" z-index="10">
				<view class="my-4 text-center">分享到</view>
				<view class="d-flex d-flex-between px-5 mb-4 bot">
					<view class="d-flex-column d-flex-middle" @click="OnShare(1)">
						<image class="rounded"
							src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E5%BE%AE%E4%BF%A1.png"
							mode="widthFix" style="width: 60rpx;"></image>
						<view class="mt-1 font24" style="color: #585858;">微信</view>
					</view>
					<view class="d-flex-column d-flex-middle" @click="OnShare(2)">
						<image class="rounded"
							src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E6%9C%8B%E5%8F%8B%E5%9C%88.png"
							mode="widthFix" style="width: 60rpx;"></image>
						<view class="mt-1 font24" style="color: #585858;">朋友圈</view>
					</view>
					<view class="d-flex-column d-flex-middle" @click="OnShare(3)">
						<image class="rounded"
							src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/QQ.png" mode="widthFix"
							style="width: 60rpx;"></image>
						<view class="mt-1 font24" style="color: #585858;">QQ好友</view>
					</view>
					<view class="d-flex-column d-flex-middle" @click="OnShare(4)">
						<image class="rounded"
							src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/qq%E7%A9%BA%E9%97%B4.png"
							mode="widthFix" style="width: 60rpx;"></image>
						<view class="mt-1 font24" style="color: #585858;">QQ空间</view>
					</view>
					<view class="d-flex-column d-flex-middle" @click="OnShare(5)">
						<image class="rounded"
							src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/logo.png" mode="widthFix"
							style="width: 60rpx;"></image>
						<view class="mt-1 font24" style="color: #585858;">小嗒好友</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	let token = uni.getStorageSync(USER_TOKEN);
	import { USER_TOKEN } from '@/constants/local-storage-key-const';
	import { blogApi } from '../../http/blogApi';
	import { userApi } from '../../http/userApi';
	import store from '@/store/index.js';
	import { DaziApi } from '../../http/Dazi';
	export default {
		data() {
			return {
				ctype: 0,
				onlineStatus: [{
						title: '在线',
						checked: null
					},
					{
						title: '隐身',
						checked: null
					}
				],
				titleOp: 0,
				ChangeOnline: false,
				bosomFriendTab: 0,
				Visible: "none",
				svgaFile: '',
				iconFile: '',
				hasAvatarFrams: false,
				blog: [],
				imgs: [],
				Dazi: [],
				selectedCity: '',
				morePopupData: [],
				blogParam: { //博客参数
					pageIndex: 1,
					pageSize: 4,
					status: 1,
					uid: 0
				},
				topid: '',
				shareData: {
					href: "https://www.168802.xyz",
					title: "小嗒组队分享",
					summary: null,
					imageUrl: null
				},
				deleteParams: {
					idList: null
				},
				isLastPage: false,
				cardLoading: true,
			}
		},
		onShow() {
			this.setUserInfo()
			this.getDazi()
			// 是否佩戴头像框
			if (this.$store.state.user.dressedVoMap['1']) {
				setTimeout(() => {
					// 判断是否设置了头像框
					this.JudgeHasAvatarFrams()
				}, 500)
			}
			// 更新初始在线状态
			console.log('onlineStatus: ', this.$store.state.user.onlineStatus);
			if (this.$store.state.user.onlineStatus === 1) {
				this.onlineStatus[0].checked = true
				this.onlineStatus[1].checked = false
			} else if (this.$store.state.user.onlineStatus === 3 || this.$store.state.user.onlineStatus === 2) {
				this.onlineStatus[1].checked = true
				this.onlineStatus[0].checked = false
			}
		},
		onPageScroll(e) {
			let scrollTop = e.scrollTop
			this.titleOp = Math.round(scrollTop - 50) / 70
		},
		onReachBottom() {
			if (this.ctype == 1) {
				if (!this.isLastPage) {
					this.blogParam.pageIndex += 1;
					this.getBlog();
				}
			}
		},
		onLoad() {
			this.uid = this.$store.state.user.uid;
			this.selectedCity = this.$store.state.user.locatedCity; //记录位置信息
		},
		methods: {
			share(item) {
				this.shareData.summary = item.remark
				this.shareData.imageUrl = item.screenshot1
				uni.hideTabBar()
				this.$refs.share.open('bottom')
			},
			// 分享
			OnShare(type) {
				if (type === 1 || type === 2) {
					uni.share({
						provider: "weixin",
						scene: type === 1 ? 'WXSceneSession' : 'WXSceneTimeline',
						type: 0,
						href: this.shareData.href,
						title: this.shareData.title,
						summary: this.shareData.summary,
						imageUrl: this.shareData.imageUrl? this.shareData.imageUrl : 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/logo.png',
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							let failData = JSON.parse(JSON.stringify(err))
							console.log(failData);
							if(failData.code == -8) {
								uni.showToast({
									title: '客户端未安装',
									icon: 'none',
									duration: 1500
								})
							} else if(failData.code == -100) {
								console.log('客户端安装了，但是没有登录，用户返回后的状态');
							} else {
								uni.showToast({
									title: failData,
									icon: 'none',
									duration: 1500
								})
							}
						}
					});
					this.$refs.share.close()
					setTimeout(() => {
						uni.showTabBar()
					}, 250)
				}
				if (type === 3 || type === 4) {
					uni.share({
						provider: "qq",
						scene: type === 3 ? 'WPA' : 'QZONE',
						type: 0,
						href: this.shareData.href,
						title: this.shareData.title,
						summary: this.shareData.summary,
						imageUrl: this.shareData.imageUrl? this.shareData.imageUrl : 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/logo.png',
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							let failData = JSON.parse(JSON.stringify(err))
							if(failData.code == -2) {
								return
							}
							uni.showToast({
								title: failData,
								icon: 'none',
								duration: 1500
							})
						}
					});
					this.$refs.share.close()
					setTimeout(() => {
						uni.showTabBar()
					}, 250)
				}
				if (type === 5) {
					uni.showToast({
						title: '此功能暂未开发！',
						icon: 'none',
					})
					this.$refs.share.close()
					setTimeout(() => {
						uni.showTabBar()
					}, 250)
				}
			},
			async Top(param) {
				let res = await blogApi.topBlog(param);
				if (param.topFlag) {
					uni.showToast({
						title: '置顶成功',
						icon: 'none',
					})
				} else {
					uni.showToast({
						title: '取消置顶成功',
						icon: 'none',
					})
				}

			},
			gotoIndexPage() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			async queryTop() {
				let res = await blogApi.queryTopBlog();
				if (res) {
					const index = this.blog.findIndex(item => item.id === res.id);
					this.topid = res.id;
					if (index !== -1) {
						console.log('存在相同的博客');
						const [item] = this.blog.splice(index, 1); // 从原位置删除
						this.blog.unshift(item); // 插入到数组最前面
					} else {
						console.log('不存在相同的博客');
						this.blog.unshift(res); // 如果不存在，直接插入到最前面
					}
				}
			},
			TopUp() {
				if (this.topid == this.morePopupData.id) { // 取消置顶
					let param = {
						id: this.morePopupData.id,
						topFlag: false
					}
					this.Top(param).then(() => {
						setTimeout(() => {
							this.getBlog();
							this.topid = '';
							this.$refs.morePopup.close()
							setTimeout(() => {
								uni.showTabBar()
							}, 250)
						}, 300)
					})
					
					return
				} else { // 置顶
					uni.showLoading({
						icon: 'none',
						title: '加载中'
					})
					let param = {
						id: this.morePopupData.id,
						topFlag: true
					}
					this.Top(param).then(() => {
						setTimeout(() => {
							this.getBlog();
							this.$refs.morePopup.close()
							uni.hideLoading()
							setTimeout(() => {
								uni.showTabBar()
							}, 250)
						}, 300)
					})
				}
			},
			async collect() {
				let params = {
					type: 2,
					flag: this.morePopupData.collectFlag ? false : true,
					blogId: this.morePopupData.id
				}
				this.morePopupData.collectFlag = this.morePopupData.collectFlag ? false : true
				let res = await blogApi.LikeAndComment(params)
				this.$refs.morePopup.close()
				setTimeout(() => {
					uni.showTabBar()
				}, 250)
			},
			async setUserInfo() {
				try {
					let params = {
						dressedVoMap: 1
					}
					const usr = await userApi.getUserInfo(params)
					store.commit('setLogin', usr)
					console.log(usr);
				} catch (e) {
					console.log('login-info', e)
				}
			},
			// 切换状态弹框
			OpenChangeOnlinePopup() {
				this.ChangeOnline = this.ChangeOnline ? false : true
			},
			// 切换在线状态
			async ChangeOnlineStatus(dex) {
				if (this.onlineStatus[dex].checked) {
					this.ChangeOnline = false
					return
				}
				this.onlineStatus.forEach(i => {
					i.checked = false
				})
				this.onlineStatus[dex].checked = true
				uni.showLoading({
					title: '切换状态中...'
				});
				if (dex === 0) {
					let res = await userApi.online()
				} else {
					let res = await userApi.invisible()
				}
				this.setUserInfo()
				uni.hideLoading();
				this.ChangeOnline = false
			},
			// 判断是否设置了头像框
			JudgeHasAvatarFrams() {
				if (this.$store.state.user.dressedVoMap && this.$store.state.user.dressedVoMap[1].svga) {
					this.svgaFile = this.$store.state.user.dressedVoMap[1].svga
					this.hasAvatarFrams = true
				}
				if (this.$store.state.user.dressedVoMap && this.$store.state.user.dressedVoMap[1].icon) {
					this.iconFile = this.$store.state.user.dressedVoMap[1].icon
					this.hasAvatarFrams = true
				}

				// 判断设备，APP设置动态头像框，小程序设置静态头像框
				// #ifdef APP
				this.device = true
				// #endif
				//#ifdef MP-WEIXIN
				this.device = false
				// #endif

				// 如果有动态头像框就设置动态头像框（静态头像框不用设置，使用device和hasAvatarFrams字段控制即可）
				if (this.hasAvatarFrams) {
					this.setAvatarFrams()
				}
			},
			// 设置动态头像框
			setAvatarFrams() {
				// 只有App才设置动态头像框
				if (this.device) {
					this.$refs.svga.render(async (parser, player) => {
						const videoItem = await parser.load(this.svgaFile);
						await player.setVideoItem(videoItem);
						// 设置动画缩放模式，可选值为 Fill / AspectFill / AspectFit
						player.setContentMode(() => {
							contentMode: 'AspectFill'
						})
						player.startAnimation()
					})
				}
			},
			async getDazi() {
				this.Dazi = [];
				let param = {
					pageIndex: 1,
					pageSize: 10,
					uid: this.$store.state.user.uid,
					status: 1
				}
				let res = await DaziApi.queryCard(param);
				let records = res.records;
				records.forEach(i => {
					this.Dazi.push(i);
				})
			},
			checkLogin() { //检查是否登录
				if (!this.$store.state.loginStatus) {
					uni.navigateTo({
						url: '/pagesMain/mplogin/mplogin'
					});
					return false;
				}
				return true;
			},
			async getBlog() {
				let res = await blogApi.blogPage(this.blogParam);
				this.cardLoading = false;
				let records = res.records;
				res.records.forEach(i => {
					let isLongChart = {
						isLongChart: 1,
					}
					i = Object.assign(i, isLongChart);
				});
				const start = this.blog.length;
				this.blog.splice(start, 0, ...records);
				if (this.blogParam.pageIndex == 1) {
					await this.queryTop();
				}
				if (records.length < this.blogParam.size) {
					this.isLastPage = true
				}
			},
			toDetail(id, gameId) { //跳转到修改搭子卡页面
				this.checkLogin();
				console.log(gameId);
				uni.navigateTo({
					url: `/pagesApp/edit/edit?id=${id}&gameId=${gameId}`
				});
			},
			// 上热门
			gotoPromotion(item) {
				uni.navigateTo({
					url: '/pagesApp/Promotion/Promotion?data=' + JSON.stringify(item)
				})
			},
			// 跳转到详情页
			gotoDetail(item) {
				this.checkLogin();
				let data = JSON.stringify(item)
				uni.navigateTo({
					url: '/pagesMain/detail/detail?data=' + data
				})
			},
			goChatAdministrator() { //我的客服
				this.checkLogin();
				const item = {
					id: '111',
					name: '小嗒客服',
					avatar: 'https://default-imges.oss-cn-beijing.aliyuncs.com/icon/myuser.png',
					conversationID: 'C2C111',
					type: 'C2C'
				}
				uni.navigateTo({
					url: '/message/im/im?to=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			async dianzan(id) {
				const param = {
					blogId: id,
					flag: true,
					type: 1
				};
				this.blog.forEach(i => {
					if (i.id == id) {
						i.favorFlag = !i.favorFlag;
						if (i.favorFlag) {
							i.favorCount = i.favorCount + 1;
							let res = blogApi.dianzanBlog(param);
						} else {
							i.favorCount = i.favorCount - 1;
							param.flag = false;
							let res = blogApi.dianzanBlog(param);
						}
					}
				})
			},
			changType(type) {
				this.checkLogin();
				this.cardLoading = true;
				this.blogParam.uid = this.$store.state.user.uid;
				this.ctype = type
				if (type === 1) {
					this.blogParam.pageIndex = 1;
					this.blog = [];
					this.getBlog();
				}
			},
			ChangebosomFriendTab(type) {
				this.checkLogin();
				this.bosomFriendTab = type
			},
			ImgSize(event, id) {
				if (event.target.width > event.target.height) { // 横图
					this.blog[id].isLongChart = 0
				}
			},
			// 图片预览
			previwImage(id, index) {
				if (this.blog[id].screenshot1) {
					this.imgs.push(this.blog[id].screenshot1)
				}
				if (this.blog[id].screenshot2) {
					this.imgs.push(this.blog[id].screenshot2)
				}
				if (this.blog[id].screenshot3) {
					this.imgs.push(this.blog[id].screenshot3)
				}
				uni.previewImage({
					current: index, // 当前显示图片索引
					urls: this.imgs, // 需要预览的图片http链接列表
				});
				this.imgs = []
			},
			// 打开更多面板
			openMorePopup(item) {
				this.morePopupData = item
				uni.hideTabBar()
				this.$refs.morePopup.open('bottom')
			},
			// 关闭更多面板
			CloseMorePopup() {
				this.$refs.morePopup.close()
				setTimeout(function() {
					uni.showTabBar()
				}, 230);
			},
			// Popup关闭时显示Tabbar
			changestatus(e) {
				if (!e.show) {
					setTimeout(function() {
						uni.showTabBar()
					}, 230);
				}
			},
			// 删除博客
			async remoteBolg() {
				this.deleteParams.idList = this.morePopupData.id
				let res = await blogApi.DeleteBlog(this.deleteParams);
				this.blog.forEach((item, index) => {
					if (item.id === this.deleteParams.idList) {
						this.blog.splice(index, 1);
					}
				})
				this.CloseMorePopup()
			},
			deleteBlog() {
				uni.showModal({
					content: '确认删除博客吗？',
					success: (res) => {
						if (res.confirm) {
							this.remoteBolg();
						}
					}
				});
			},
			goLogin() {
				uni.navigateTo({
					url: '/pagesMain/mplogin/mplogin'
				})
			},
			gotomember() {
				this.checkLogin();
				uni.navigateTo({
					url: '/pagesMain/member/member'
				})
			},
			gotoAboutMe() {
				this.checkLogin();
				uni.navigateTo({
					url: '/pagesApp/aboutMe/aboutMe'
				})
			},
			gotoSecurity() {
				this.checkLogin();
				uni.navigateTo({
					url: '/pagesMain/security/security'
				})
			},
			gotoJoinIn() {
				this.checkLogin();
				uni.navigateTo({
					url: '/pagesMain/my-JoinIn/my-JoinIn'
				})
			},
			gotoFollowPage() {
				this.checkLogin();
				uni.navigateTo({
					url: '/pagesMain/My-FollowPage/My-FollowPage'
				})
			},
			gotoPersonalHomepage() {
				this.checkLogin();
				uni.navigateTo({
					url: '/pagesMain/User-PersonalHomepage/User-PersonalHomepage'
				})
			},
			gotoSecurityCenter() {
				uni.navigateTo({
					url: '/pagesApp/securityCenter/securityCenter'
				})
			},
			gotoFans() {
				this.checkLogin();
				uni.navigateTo({
					url: '/pagesMain/my-fans/my-fans'
				})
			},
			gotoVisitor() {
				this.checkLogin();
				uni.navigateTo({
					url: '/pagesMain/my-browse/my-browse'
				})
			},
			gotoBrowse() {
				this.checkLogin();
				uni.navigateTo({
					url: '/pagesMain/my-visitor/my-visitor'
				})
			},
			gotoWallet() {
				this.checkLogin();
				uni.navigateTo({
					url: '/pagesMain/my-wallet/my-wallet'
				})
			},
			gotoPersonal() {
				this.checkLogin();
				uni.navigateTo({
					url: '/pagesMain/my-personality/my-personality'
				})
			},
			Gotorecords() {
				this.checkLogin();
				uni.navigateTo({
					url: '/pagesMain/my-records/my-records'
				})
			},
			gotoActivityCenter() {
				this.checkLogin();
				uni.navigateTo({
					url: '/pagesMain/my-ActivityCenter/my-ActivityCenter'
				})
			},
			gotoTestPage() {
				this.checkLogin();
				uni.navigateTo({
					url: '/pagesApp/testPage/testPage'
				})
			},
			OpenThumbUpFrame() {
				this.checkLogin();
				this.Visible = "block"
				uni.setTabBarStyle({
					backgroundColor: '#8b8db0'
				})
			},
			confirm() {
				this.checkLogin();
				this.Visible = "none"
				uni.setTabBarStyle({
					backgroundColor: '#fff'
				})
			},
			CloseBullet(e) {
				e.stopPropagation();
			},
			loginOut() {
				this.checkLogin();
				uni.navigateTo({
					url: '/pagesMain/my-setup/my-setup'
				})
			},
			// 打开窗口
			showDrawer(e) {
				this.$refs.showLeft.open();
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
			gotoGift() {
				this.checkLogin();
				uni.navigateTo({
					url: '/pagesMain/mygifts/mygifts'
				})
			},
			gotoMytask() {
				this.checkLogin();
				uni.navigateTo({
					url: '/pagesMain/mytask/mytask'
				})
			},
			gotoInitial() {
				this.checkLogin();
				uni.navigateTo({
					url: '/pagesMain/Initial-info/Initial-info'
				})
			},
			gotoAccountLevelPage(type) {
				this.checkLogin();
				uni.navigateTo({
					url: '/pagesApp/AccountLevel/AccountLevel?type=' + type
				})
			}
		},
		onHide() {
			this.ChangeOnline = false
		}
	}
</script>

<style scoped>
	/* 添加新的页面容器样式 */
	.page-container {
		width: 100%;
		height: 100vh;
	}

	/* 确保内容可以滚动但不显示滚动条 */
	.lgmain {
		width: 100%;
		height: 100%;
		overflow-y: auto;
		overflow-x: hidden;
	}

	/* 隐藏滚动条 */
	.lgmain::-webkit-scrollbar {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		background: transparent !important;
	}

	.scroll-wrapper {
		width: 100%;
		white-space: nowrap;
	}

	.g-item1 {
		background-color: #fceaf6;
		padding: 16rpx 20rpx;
		min-width: 190rpx;
		height: 50rpx;
		display: inline-flex;
		align-items: center;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.game-icon {
		width: 46rpx;
		height: 46rpx;
		flex-shrink: 0;
	}

	.game-name {
		flex: 1;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.lgmain {
		background-image: url('https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/formal/images/yuebg.png');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: 0 100%;
		min-height: 100vh;
	}

	.bgmask {
		background-color: rgba(0, 0, 0, .4);
	}

	.rad-bottom {
		border-bottom-right-radius: 60rpx;
		border-bottom-left-radius: 60rpx;
	}

	.capsule1 {
		background-color: #ffa6e0;
		height: 56rpx;
		color: #221816;
		padding-left: 20rpx;
		padding-right: 20rpx;
		margin-right: 20rpx;
	}

	.capsule2 {
		background-color: #59dfaa;
		height: 56rpx;
		color: #221816;
		padding-left: 20rpx;
		padding-right: 20rpx;
		margin-right: 20rpx;
	}

	.capsule3 {
		background-color: #dbd2ff;
		height: 56rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		color: #221816
	}

	.g-item1 {
		background-color: #fceaf6;
		padding: 10rpx;
		width: 190rpx;
		height: 50rpx;
	}

	.g-item2 {
		background-color: #f5f4fc;
		padding: 10rpx;
		height: 50rpx;
		width: 190rpx;
	}

	.g-item3 {
		background-color: #eff3fc;
		padding: 10rpx;
		height: 50rpx;
		width: 190rpx;
	}

	.color231816 {
		color: #231816;
	}

	.current {
		color: #231816;
		font-weight: 700;
		font-size: 36rpx;
	}

	.color9f {
		color: #9f9f9f;
	}

	.player {
		background-image: linear-gradient(-45deg, #CFEBFF, #F0EAFF, #DEE4FF, #FCE5F2);
		border-radius: 15rpx
	}

	.level {
		width: 220rpx;
		padding-top: 30rpx;
		height: 210rpx;
		border-radius: 20rpx;
	}

	.threePic {
		width: 200rpx;
		height: 180rpx;
	}

	.MorePic {
		width: 200rpx;
		height: 200rpx;
	}

	.aixin {
		background: #FFA5DF;
		width: 110rpx;
	}

	.friendtab-b {
		background-image: linear-gradient(to right, #126efb, #2ac3fe);
	}

	.friendtab-p {
		background-image: linear-gradient(45deg, #e322d2, #feae02);
	}

	.topic-list {
		margin-bottom: 10rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.NoOnLine {
		color: red;
	}

	.invisible {
		color: #feaa1c;
	}

	.topic-content {
		display: flex;
		align-items: center;
		border-radius: 30rpx;
		background: #F0F7FF;
		margin-right: 10rpx;
	}

	.topic-hash {
		color: #18c3ff;
		font-size: 28rpx;
		margin-right: 2rpx;
		font-weight: bold;
	}

	.topic-name {
		font-size: 28rpx;
	}

	.ActiveRadio {
		margin-right: 20rpx;
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
		background-image: url(https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E5%8B%BE%E9%80%89.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.VipText {
		background: linear-gradient(200deg, #ebdea3 40%, #e69772 100%);
		-webkit-background-clip: text;
		color: transparent;
	}

	.SvipText {
		background: linear-gradient(-90deg, #ee67cd 0%, #a689e3 50%, #5faefd 100%);
		-webkit-background-clip: text;
		color: transparent;
	}
</style>